<template>
  <div>
    <FiveWork>
      <template #title>
<h4>用户名</h4>
      </template>
      <template #inp>
        <input type="text">
      </template>
    </FiveWork>
     <FiveWork>
      <template #title>
<h4>密码</h4>
      </template>
      <template #inp>
        <input type="password">
      </template>
    </FiveWork>
    <FiveWork>
      <template #title>
<h4>性别</h4>
      </template>
      <template #inp>
        <input type="radio" name="sex" value="male" v-model="gender">男
        <input type="radio" name="sex" value="famale" v-model="gender">女
      </template>
    </FiveWork>
    <FiveWork>
      <template #title>
<h4>爱好</h4>
      </template>
      <template #inp>
        <input type="checkbox"  value="英雄联盟">英雄联盟
        <input type="checkbox"  value="csgo">csgo
        <input type="checkbox"  value="永劫无间">永劫无间
      </template>
    </FiveWork>
     <FiveWork>
      <template #title>
<h4>来自于</h4>
      </template>
      <template #inp>
        <select>
          <option value="杭州">杭州</option>
          <option value="舟山">舟山</option>
          <option value="宁波">宁波</option>
        </select>
      </template>
    </FiveWork>
  </div>
</template>

<script>
import FiveWork from './components/fiveWork.vue'
export default {
components:{
  FiveWork
},
data() {
  return {
    gender:'male'
  }
}
}
</script>

<style>

</style>